<!-- 实体卡余额记录 -->
<template>
    <view class="page" :style="{ '--color': color }">
        <status-bar :title="`${nameDefinition.t_walletTitle}收支明细`"></status-bar>
        <backTop v-if="toTop"></backTop>
        <view class="headBox thmeBg">
            <image :src="staticUrl + '/images/integralRecord.png'" mode="aspectFill" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0"></image>
            <view class="recentMonth flex-box align-center">
                <text class="iconfont icon-xiangzuo" :class="{ conotClick: currentIndex == 0 }" @click="prevMonth"></text>
                <swiper class="swiper flex" display-multiple-items="3" @change="swiperChange" :current="currentIndex" :disable-touch="true">
                    <swiper-item>
                        <view class="swiper-item"></view>
                    </swiper-item>
                    <swiper-item v-for="(item, index) in date" :key="index">
                        <view
                            class="swiper-item"
                            :class="{
                                active: currentIndex == index
                            }"
                            @click="tapMonth(index)"
                        >
                            {{ item.name }}
                        </view>
                    </swiper-item>
                    <swiper-item>
                        <view class="swiper-item"></view>
                    </swiper-item>
                </swiper>
                <text class="iconfont icon-xiangyouxiayiye" :class="{ conotClick: currentIndex == 11 }" @click="nextMonth"></text>
            </view>
            <view class="tatalIntegral flex-box">
                <!-- <text>总计：</text> -->
                <text class="weight">{{ integral }}</text>
                <text class="size22 white m-left4">{{ nameDefinition.t_walletUnit }}</text>
            </view>
            <view class="tatalIntegral1 flex-box align-center">
                <text>本月收入：{{ earn }}</text>
                <text class="midLine"></text>
                <text>本月消耗：{{ use }}</text>
            </view>
        </view>
        <!-- 余额明细 -->
        <view class="recordBox">
            <view class="recordListTitle">本月收支明细</view>
            <view class="underline"></view>
            <view class="recordList" v-if="recordList.length > 0">
                <block v-for="(item, index) in recordList" :key="index">
                    <view class="recordItem flex-box flex-between align-center">
                        <view class="recordLeft flex">
                            <view class="recordName">{{ item.title }}</view>
                            <view class="recordDate">{{ item.addDate }}</view>
                        </view>
                        <view>
                            <text class="increase success-color" v-if="item.status == 1">+{{ item.t_wallet }}</text>
                            <text class="decrease error-color" v-else>-{{ item.t_wallet }}</text>
                        </view>
                    </view>
                    <view class="underline"></view>
                </block>
                <view class="DiLine" v-if="recordList && recordList.length > 0 && !more">----- 我也是有底线的 -----</view>
            </view>
            <empty type="1" cat="4" v-else msg="暂无相关信息"></empty>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';

    export default {
        data() {
            return {
                toTop: false,
                currentIndex: 11,
                recordList: [],
                integral: 0,
                earn: 0,
                use: 0,
                staticUrl: this.staticUrl,
                page: 1,
                more: false,

                date: [],
                noData: false
            };
        },
        onLoad() {
            let year = new Date().getFullYear();
            let month = new Date().getMonth() + 1;
            for (var i = 0; i < 12 - month; i++) {
                // 去年
                this.date.push({
                    year: year - 1,
                    month: i + month + 1 < 10 ? '0' + (i + month + 1) : i + month + 1,
                    name: i + month + 1 + '月'
                });
            }
            for (var i = 0; i < month; i++) {
                // 今年
                this.date.push({
                    year: year,
                    month: i + 1 < 10 ? '0' + (i + 1) : i + 1,
                    name: i + 1 + '月'
                });
            }
            this.currentIndex = this.date.length - 1;
            this.getRecord(false);
            this.$BarTitle(`${this.nameDefinition.fenTitle}明细`);
        },

        methods: {
            getRecord(flag) {
                this.more = false;
                if (!flag) {
                    this.recordList = [];
                    this.page = 1;
                }
                this.getUserIntegral();
                this.$http
                    .post({
                        url: '/SRA_userIntegral/tWalletRecord',
                        data: {
                            VeriCode: this.bid,
                            vId: this.vid,
                            Y: this.date[this.currentIndex].year,
                            M: this.date[this.currentIndex].month,
                            pageIndex: this.page,
                            pageSize: 20
                        }
                    })
                    .then((res) => {
                        if (res.code != 100) return this.$Toast(res.msg);
                        const result = res.data || [];
                        this.recordList = this.recordList.concat(result);
                        if (result && result.length > 19) {
                            this.more = true;
                            this.page++;
                        }
                        if (this.recordList.length < 1) {
                            this.noData = true;
                        }
                        uni.hideLoading();
                    });
            },

            swiperChange(e) {
                console.log(e);
            },
            getUserIntegral() {
                this.$http
                    .post({
                        url: '/SRA_userIntegral/thisMonthTWallet',
                        data: {
                            VeriCode: this.bid,
                            vId: this.vid,
                            Y: this.date[this.currentIndex].year,
                            M: this.date[this.currentIndex].month
                        }
                    })
                    .then((res) => {
                        if (res.code != 100) return this.$Toast(res.msg);
                        const result = res.data;
                        this.integral = result.v_t_wallet;
                        this.earn = result.gainTWallet;
                        this.use = result.minusTWallet;
                    });
            },
            tapMonth(index) {
                if (index == this.currentIndex) {
                    return;
                }
                if (index < this.currentIndex + 1) {
                    this.prevMonth();
                }
                if (index > this.currentIndex) {
                    this.nextMonth();
                }
            },
            prevMonth() {
                if (this.currentIndex > 0) {
                    this.currentIndex--;
                    uni.showLoading({
                        title: '加载中'
                    });
                    this.getRecord(false);
                }
            },
            nextMonth() {
                if (this.currentIndex < 11) {
                    this.currentIndex++;
                    uni.showLoading({
                        title: '加载中'
                    });
                    this.getRecord(false);
                }
            }
        },
        computed: {
            ...mapState(['color', 'nameDefinition', 'vid', 'share', 'bid', 'nameDefinition'])
        },
        onShareAppMessage(res) {
            return {
                title: this.share.title,
                desc: this.share.desc,
                path: '/pages/index/index?share_v_id=' + this.vid,
                imageUrl: this.share.imageUrl
            };
        },
        onPageScroll(e) {
            if (e.scrollTop > 300) {
                this.toTop = true;
            } else {
                this.toTop = false;
            }
        },
        onReachBottom() {
            if (this.more) {
                this.getRecord(true);
            }
        }
    };
</script>

<style scoped lang="scss">
    .underline {
        height: 1px;
        background-color: #eeeeee;
    }

    .icon-xiangyouxiayiye,
    .icon-xiangzuo {
        color: white;
        font-size: 28rpx;
    }

    .headBox {
        padding: 24rpx 36rpx;
        position: relative;
    }

    .recentMonth {
        margin: 0 46rpx 0 46rpx;
        height: 52rpx;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 52rpx;
        padding: 0 26rpx;
        position: relative;
        z-index: 33;
    }

    .swiper {
        height: 100%;
        margin: 0 14rpx;
    }

    .swiper swiper-item {
        text-align: center;
        line-height: 52rpx;
    }

    .swiper-item {
        color: white;
        font-size: 24rpx;
    }

    .icon-jiantouyou {
        color: white;
        font-size: 28rpx;
    }

    .icon-jiantouyou:nth-last-of-type(2) {
        transform: rotate(180deg);
    }

    /* 当前查看的月份 */
    .swiper-item.active {
        font-size: 36rpx;
    }

    /* 未来的月份 */
    .swiper-item.future {
        opacity: 0.6;
    }

    .conotClick {
        opacity: 0.4;
    }

    .tatalIntegral {
        justify-content: center;
        align-items: flex-end;
        margin: 20rpx 0;
    }

    .tatalIntegral text {
        font-size: 32rpx;
        color: white;
    }

    .tatalIntegral .weight {
        font-size: 56rpx;
        color: white;
        font-weight: bold;
        margin-bottom: -8rpx;
    }

    .tatalIntegral1 {
        justify-content: center;
        align-items: flex-end;
    }

    .tatalIntegral1 text {
        color: white;
    }

    .midLine {
        display: inline-block;
        margin: 0 30rpx;
        width: 2rpx;
        height: 34rpx;
        background-color: white;
        transform: scale(0.5);
    }

    /* 日历 */
    .recordListTitle {
        text-align: center;
        color: #232323;
        font-size: 32rpx;
        line-height: 80rpx;
    }

    .recordItem {
        padding: 24rpx 36rpx;
    }

    .recordLeft {
        margin-right: 20rpx;
    }

    .recordDate {
        color: #999999;
        font-size: 20rpx;
    }

    .recordName {
        color: #232323;
        margin-bottom: 10rpx;
    }

    .increase {
        font-size: 36rpx;
        padding: 0;
    }

    .decrease {
        font-size: 36rpx;
    }
</style>
